<template>
    <div class="continer">
        <div class="titleBox">
            <span class="span1">装修进度：50%</span>
            <div class="proBar"><span class="bar"></span></div>
        </div>
        <div class="nodeBox">
            <div class="nodeWrap" v-for="(item,index) in 10" :key="index">
                <div class="listBox" @click="cutShow('showIdx',index)">
                    <span class="dot"></span>
                    <div class="lisSec">
                        <div class="top">
                            <span class="left">交底</span>
                            <span class="right">已完成</span>
                        </div>
                        <div class="center">计划完成时间：2015.09.01  丨 实际完成时间：2015.09.01</div>
                    </div>
                </div>
                <div class="listMsg" v-if="showIdx==index">
                    <div class="dateBox">
                        <span>2019.05.01</span>
                        <img class="xsjImg" src="@/assets/images/xsj.png" alt="">
                    </div>
                    <span class="jdName">监理：张先生</span>
                    <p class="incTxt">您家的水电已验收合格，准备封补线槽，泥工贴砖。</p>
                    <div class="phoBox">
                        <img src="@/assets/images/test2.jpg" alt="">
                        <img src="@/assets/images/test2.jpg" alt="">
                        <img src="@/assets/images/test2.jpg" alt="">
                        <img src="@/assets/images/test2.jpg" alt="">
                    </div>
                    <div class="dateBox dateBox2">
                        <span>2019.05.01</span>
                        <img class="xsjImg" src="@/assets/images/xsj.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <empty-tabbar></empty-tabbar>
        <tabbar></tabbar>
    </div>
</template>
<script>
import Tabbar from '@/pages/home/components/Tabbar'
import emptyTabbar from '@/pages/home/components/emptyTabbar'
export default {
    name: 'schedule',
    components: {
        Tabbar,emptyTabbar
    },
    data(){
        return {
            showIdx:null,
        }
    },
    created(){
        console.log(this.$route.query.test)
    },
    methods: {
        cutShow(para1,para2){
            if(this[para1]==para2){
                this[para1] = null
            }else{
                this[para1] = para2
            }
            
        }
    }
}
</script>
<style lang="stylus" scoped>
.continer
    display flex
    flex-direction column
    align-items center
    .titleBox
        width 100%
        box-sizing border-box
        padding 30px 24px
        .span1
            display block
            width 100%
            text-align center
            line-height 24px
            color #333333
        .proBar
            width 100%
            height 12px
            border-radius 6px
            background #ececec
            overflow hidden
            margin-top 20px
            .bar
                display block
                width 50%
                height 12px
                background url(../../assets/images/bar.jpg)
                border-radius 6px
    .nodeBox
        width 100%
        box-sizing border-box
        display flex
        flex-direction column
        align-items flex-end
        .nodeWrap
            width 100%
            display flex
            box-sizing border-box
            padding 0 24px
            flex-direction column
            align-items flex-end
            .listBox
                width 100%
                height 125px
                display flex
                align-items center
                justify-content space-between
                margin-top 20px
                .dot
                    width 12px
                    height 12px
                    border-radius 50%
                    background red
                .lisSec
                    width 666px
                    height 100%
                    background #f9f9f9
                    border-radius 5px
                    box-sizing border-box
                    border-left 6px solid
                    border-color red
                    display flex
                    align-items center
                    flex-direction column
                    justify-content center
                    .top
                        width 614px
                        height 26px
                        display flex
                        align-items center
                        justify-content space-between
                        font-size 26px
                        font-weight bold
                        .left
                            color #333333
                        .right 
                            color red
                    .center
                        width 614px
                        line-height 24px
                        color #666666
                        display flex
                        justify-content space-between
                        margin-top 20px
            .listMsg
                width 660px
                background #f9f9f9
                .dateBox
                    height 50px
                    display flex
                    align-items center
                    line-height 50px
                    font-size 24px
                    color #333333
                    background #e4e4e4
                    box-sizing border-box
                    padding-left 18px
                    .xsjImg
                        width 16px
                        height 12px
                        margin-left 10px
                .jdName
                    display block
                    line-height 24px
                    font-size 24px
                    color #333333
                    font-weight bold
                    width 100%
                    text-align left 
                    padding-left 18px
                    margin-bottom 14px
                    margin-top 20px
                .incTxt
                    width 100%
                    text-align left 
                    padding-left 18px
                    line-height 34px
                    font-size 22px
                    color #8b8b8b
                .phoBox
                    width 100%
                    padding 20px 18px
                    box-sizing border-box
                    white-space nowrap
                    overflow-x auto
                    img
                        width 204px
                        height auto
                        display inline
                        margin-right 8px
                .dateBox2
                    border-bottom-left-radius 10px
                    border-bottom-right-radius 10px
                    .xsjImg
                        rotate 180deg
</style>
